import React from 'react';
import {DeviceEventEmitter, StatusBar, Linking, TextInput, Easing, Animated, PixelRatio, TouchableOpacity, Alert, Dimensions, StyleSheet, View, Text, Image, Modal } from 'react-native';
import LinearGradient from 'react-native-linear-gradient'

import Images from '../../images/Images';
import Constants from '../../utils/Constants';
import screen from '../../utils/screen';
import {cutZero, filterErrorMsg, FontFamily, getffly, numAdd} from '../../utils/common';
import DialogTip from '../../widgets/modal/DialogTip';
import RequestUtil from '../../utils/RequestUtil';
import Api from '../../utils/Api';
import {AppModal} from '../../widgets/modal';

const contentWidth = screen.width - screen.PIXEL_240;

export default  class OrderConfirm extends React.Component {
    constructor(props) {
        super(props);


    }

    state={
        data:null,
        modalVisible:false
    }


    componentDidMount = () => {

    }

    submitOrder = ()=>{
        this.tipDialog.showLoading()
        let param = {task_id:this.state.data.id}
        RequestUtil.post(Api.taskOrder,param,true).then(res=>{
            let data = res.data
            console.log('submit order',res)
            this.tipDialog.hideDialog()
            this.tipDialog.showDialog(3,Constants.order.order_submitted,0)
            setTimeout(()=>{
                this.hideDialog()
                this.props.navigation.popToTop();
                this.props.navigation.push("Order");
                this.props.navigation.push("OrderDetail",{id:data.order_id});
            },800);
        },error=>{
            this.tipDialog.hideDialog()
            if (error.code === -4) {

                let  content = Constants.order.unable_to_grab_this_order  + error.msg;
                content = filterErrorMsg(content)
                let actions = [
                    {
                        title:Constants.common.cancel,
                        onPress:()=>{
                            AppModal.hideAlert()
                        }
                    },{
                        title:Constants.common.upgrade,
                        onPress:()=>{
                            this.props.navigation.navigate("VIP");
                            DeviceEventEmitter.emit("update_vip", "");
                        }
                    },
                ]
                AppModal.alert(Constants.common.error, content,actions);

            }else{

                let  content = Constants.order.unable_to_grab_this_order  + error.msg;
                content = filterErrorMsg(content)
                AppModal.alert(Constants.common.error, content,[{
                    title:Constants.common.OK,
                    onPress:()=>{
                        AppModal.hideAlert()
                    }
                }]);

            }
        })
    }



    hideDialog = () => {

        this.setState({ modalVisible: false });
    }

    show = (data)=>{
        this.setState({
            modalVisible:true,
            data:data
        })
    }

    renderContent(){
        const {data} = this.state
        if(!data){
            return null
        }

        return (
            <View style={styles.innerContainer}>

                <Text style={styles.title}>{Constants.order.success_match_order}</Text>

                <Image source={{uri:data.icon}} style={styles.goodsImage}/>
                <Text style={styles.goodsName}>{data.title}</Text>
                <Text style={styles.fromText}>from {data.from}</Text>
                <View style={{flexDirection:'row',justifyContent:'space-between',width:'100%',marginTop:screen.PIXEL_60}}>
                    <Text style={{fontSize:14,color:'#000'}}>{Constants.order.order_amount}</Text>
                    <Text style={{fontSize:14,color:'#D85700'}}>{Constants.appsymbol} {cutZero(data.deposit)}</Text>
                </View>
                <View style={{flexDirection:'row',justifyContent:'space-between',width:'100%',marginTop:screen.PIXEL_20}}>
                    <Text style={{fontSize:14,color:'#000'}}>{Constants.order.commission}</Text>
                    <Text style={{fontSize:14,color:'#D85700'}}>{Constants.appsymbol} {cutZero(data.reward)}</Text>
                </View>
                <View style={{flexDirection:'row',justifyContent:'space-between',width:'100%',marginTop:screen.PIXEL_20}}>
                    <Text style={{fontSize:14,color:'#000'}}>{Constants.order.amount_to_be_returned}</Text>
                    <Text style={{fontSize:14,color:'#D85700'}}>{Constants.appsymbol} {numAdd( cutZero(data.deposit),cutZero(data.reward)  )}</Text>
                </View>

                <TouchableOpacity
                    style={styles.submitBtn}
                    onPress={this.submitOrder}
                >
                    <Text style={{color:'#fff',fontSize:16}}>{Constants.order.submit_order}</Text>
                </TouchableOpacity>
            </View>

        )
    }



    render() {




        return (
            <Modal
                animationType={'none'}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => { this._setModalVisible(false) }}
                onShow={this.startShow}
            >
                <StatusBar barStyle='light-content' translucent={true} backgroundColor="rgba(16, 17, 22,0.75)" animated={false} />
                <TouchableOpacity
                    activeOpacity={1.0}
                    onPress={() => {

                    }}
                    style={styles.bottomcontainer}>

                    <View style={styles.container}>

                        {this.renderContent()}

                        <TouchableOpacity
                            style={{marginTop:screen.PIXEL_20}}
                            onPress={()=>{
                                this._setModalVisible(false)
                            }}
                        >
                            <Image source={Images.close} style={styles.close}/>
                        </TouchableOpacity>
                    </View>
                    <DialogTip ref={ref=>{this.tipDialog = ref}} />
                </TouchableOpacity>
            </Modal>
        );
    }


    _setModalVisible = (visible) => {
        this.setState({ modalVisible: visible });
    }

    startShow = () => {

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    innerContainer: {
        width: screen.width - screen.PIXEL_100,
        padding:screen.PIXEL_40,
        backgroundColor: '#FFFFFF',
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: screen.PIXEL_50
    },

    close:{
        width:screen.PIXEL_70,
        height:screen.PIXEL_70
    },
    bottomcontainer: {
        zIndex: 2,
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'rgba(16, 17, 22,0.75)',
        justifyContent: 'flex-end',
    },
    title:{
        color:'#377C74',fontSize:19,fontFamily:getffly(FontFamily.medium),textAlign:'center'
    },
    goodsImage:{
        marginTop:screen.PIXEL_30,width:screen.PIXEL_270,height:screen.PIXEL_300
    },
    goodsName:{
        color:'#000',fontSize: 19,fontWeight:'500',fontFamily: getffly(FontFamily.medium),
        marginTop: screen.PIXEL_50
    },
    fromText:{
        color:'#FF7B14',fontSize:13
    },
    submitBtn:{
        backgroundColor:'#377C74',height:screen.PIXEL_90,width:'100%',marginTop:screen.PIXEL_40,
        borderRadius:screen.PIXEL_20,justifyContent:'center',alignItems:'center'
    },


});



